import React, { Fragment } from 'react';
import { Link, Redirect, Switch, Route } from 'dva/router';
import DocumentTitle from 'react-document-title';
import { Icon, Layout, Dropdown, Menu, Avatar, Spin } from 'antd';
import { connect } from 'dva';
import classnames from 'classnames';
import GlobalFooter from '../components/GlobalFooter';
import styles from './OfficialWebsiteLayout.less';
import { getMenuData } from '../common/menu';
import { getRoutes } from '../utils/utils';
import { title as Title } from '../title';
import '../../node_modules/animate.css';
import TopNav from '../components/DocTopNav';
import '../../node_modules/swiper/dist/css/swiper.min.css';

const { Header, Content, Footer } = Layout;

const copyright = (
    <Fragment>
        <p className={styles.footer}>
            Copyright <Icon type="copyright" /> S.F.Co.,Ltd.
        </p>
    </Fragment>
);

@connect(({ user, loading }) => ({
    user,
    loading: loading.effects['user/fetchCurrent'],
})) //eslint-disable-line
class OfficialWebsiteLayout extends React.PureComponent {
    getPageTitle(options = {}) {
        const { routerData, location } = this.props;
        const { pathname } = location;
        const { isNav = false } = options;
        let title = Title;
        const currentRouterName = routerData[pathname] && routerData[pathname].name;

        if (!currentRouterName) return '';

        if (isNav) {
            title = currentRouterName;
        }

        if (!isNav) {
            title = `${currentRouterName} - ${Title}`;
        }

        return title;
    }

    handleMenuClick = ({ key }) => {
        const {
            dispatch,
            history,
            location: { pathname },
        } = this.props;
        if (key === 'logout') {
            dispatch({
                type: 'user/logout',
            });
        }
        if (key === 'changePassword') {
            if (pathname !== '/change-password') {
                history.push({
                    pathname: '/change-password',
                });
            }
        }
    };

    render() {
        const {
            routerData,
            match,
            location: { pathname },
            location,
            user: { currentUser },
            loading,
        } = this.props;
        const menu = (
            <Menu className={styles.menu} selectedKeys={[]} onClick={this.handleMenuClick}>
                <Menu.Item disabled>
                    <Icon />
                    {currentUser ? currentUser.name : ''}
                </Menu.Item>
                <Menu.Item key="changePassword">
                    <Icon type="changePassword" />
                    修改密码
                </Menu.Item>
                <Menu.Divider />
                <Menu.Item key="logout">
                    <Icon type="logout" />
                    退出登录
                </Menu.Item>
            </Menu>
        );
        const ele = (
            <div className={styles.user}>
                <Link to="/user/login">登录</Link>
                <Link to="/user/register">注册</Link>
            </div>
        );
        return (
            <DocumentTitle title={this.getPageTitle()}>
                <Layout className={classnames(styles.container, 'owLayout')}>
                    <Header
                        style={{
                            background: pathname === '/ow/home' ? '#1a2a53' : '#2A76D1',
                            position: 'fixed',
                            zIndex: 10,
                            width: '100%',
                            height: 50,
                            lineHeight: '50px',
                        }}
                    >
                        <div
                            style={{
                                maxWidth: 1366,
                                height: 50,
                                margin: '0 auto',
                            }}
                        >
                            {/* 这里头部添加顺丰OCR标志 */}
                            <div className={styles.logo}>
                                <Link to="/" className="link">
                                    {Title}
                                </Link>
                            </div>
                            <div style={{ float: 'left' }}>
                                <TopNav menuData={getMenuData()} location={location} />
                            </div>
                            {!currentUser && !loading && ele}
                            {currentUser && (
                                <div className={styles.user}>
                                    <Link to="/application/management">控制台</Link>
                                    {currentUser ? (
                                        <Dropdown overlay={menu}>
                                            <span className={`${styles.action} ${styles.account}`}>
                                                <Avatar
                                                    size="small"
                                                    className={styles.avatar}
                                                    src={
                                                        currentUser.avatar ||
                                                        require('../assets/default-avatar.gif')
                                                    }
                                                />
                                            </span>
                                        </Dropdown>
                                    ) : (
                                        <Spin size="small" style={{ marginLeft: 8 }} />
                                    )}
                                </div>
                            )}
                        </div>
                    </Header>
                    <Content style={{ display: 'flex', flexDirection: 'column' }}>
                        <Switch>
                            {getRoutes(match.path, routerData).map(item => (
                                <Route
                                    key={item.key}
                                    path={item.path}
                                    component={item.component}
                                    exact={item.exact}
                                />
                            ))}
                            <Redirect from="/ow" to="/ow/home" />
                        </Switch>
                    </Content>
                    <Footer style={{ background: '#333E62', padding: 0 }}>
                        <GlobalFooter copyright={copyright} />
                    </Footer>
                </Layout>
            </DocumentTitle>
        );
    }
}

export default OfficialWebsiteLayout;
